<template>
	<view class="page">
		<video :src="src" autoplay :controls="false" :style="'height:'+screenHeight+'px'" style="width:750rpx"></video>
		<!-- 头部 -->
			<view style="position:fixed; left: 0; bottom: 0; right: 0; top:15rpx;">
				<!-- :style="'top:'+statusBarHeight/2+'px'" -->
				<!-- 个人信息｜观看详细信息 -->
				<view style="height: 80rpx;" class="px-2 flex justify-between">
					<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex rounded-circle">
						<view class="p">
							<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width:70rpx;height:70rpx;" class="rounded-circle"></image>
						</view>
						<view class="flex-1 flex flex-column justify-center">
							<text class="text-white font">昵称</text>
							<text class="text-white font-sm">100</text>
						</view>
						<view class="p">
							<view class="rounded-circle bg-danger" style="width:70rpx; height:70rpx;">
								<text class="text-white" style="text-align: center; display: block;">+</text>
							</view>
						</view>
					</view>
				
				
				
					<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex rounded-circle">
						<scroll-view scroll-x="true" class="flex-1 flex" style="width:100%" enable-flex="true">
							<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width:70rpx;height:70rpx;" class="rounded-circle"></image>
						</scroll-view>
		
						<view class="p">
							<view class="rounded-circle bg-danger flex flex-column justify-center" style="width:70rpx; height:70rpx;">
								<text class="text-white font-sm"></text>
								<text class="text-white font-sm" style="text-align: center; display: block;">1000</text>
								<text class="text-white font-sm"></text>
							</view>
						</view>
						
					</view>
				
				</view>
				
				
				
				<!-- 金币 -->
				<view style="height: 80rpx;" class="px-2 my-2">
					<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex rounded-circle align-center justify-between">
						<view class="p">
							<text class="text-warning">金币</text>
						</view>
						<view class="flex-1 flex flex-column justify-center">
							<text class="text-white font-sm">100</text>
						</view>
					</view>
				</view>
				
				
				<!-- 收到礼物 -->
				<f-gift ref="gift"></f-gift>
				
			</view>
			
		<!-- 弹幕 -->
		<f-danmu ref="danmu"></f-danmu>
		
		<!-- 底部 -->
		<view style="position:fixed; left: 0; bottom: 0; right: 0;height: 120rpx;" class="flex align-center justify-between">
			<view class="px-2">
				<view class="btn px-3 flex align-center justify-center" @click="openInput">
					<text class="text-white font">说点什么...</text>
				</view>
			</view>
			<view class="flex align-center">
				<view class="btn flex align-center justify-center" style="width: 80rpx; margin-right: 20rpx;" @click="openCoin">
					<image src="https://www.dogeman.studio/public/uploads/static/functions/live/coin.png" style="width:70rpx;height:70rpx; background-color: rgba(0,0,0,0);" class="rounded-circle"></image>
				</view>
				<view class="btn flex align-center justify-center" style="width: 80rpx; margin-right: 20rpx;" @click="openGift">
					<image src="https://www.dogeman.studio/public/uploads/static/functions/live/gift.png" style="width:55rpx;height:55rpx; background-color: rgba(0,0,0,0);" class="rounded-circle"></image>
				</view>
				<view class="btn flex align-center justify-center" style="width: 80rpx; margin-right: 20rpx;">
					<image src="https://www.dogeman.studio/public/uploads/static/functions/live/share.png" style="width:55rpx;height:55rpx; background-color: rgba(0,0,0,0);" class="rounded-circle"></image>
				</view>
				<view class="btn flex align-center justify-center" style="width: 80rpx; margin-right: 20rpx;" @click="back">
					<image src="https://www.dogeman.studio/public/uploads/static/functions/live/back.png" style="width:50rpx;height:50rpx; background-color: rgba(0,0,0,0);" class="rounded-circle"></image>
				</view>
			</view>
		</view>
		
		<!-- 输入框弹出层 -->
		<uni-popup type="bottom" ref="input">
			<view class="bg-white flex align-center px-3" style="height: 120rpx">
				<input type="text" v-model="content" class="border rounded flex-1 px-3 font-md" placeholder="说点什么..." style="height: 80rpx"/>
				<view class="bg-main flex align-center justify-center py-2 px-2 ml-3 rounded" @click="submit" :class="content === '' ? 'bg-main-disabled' : 'bg-main' ">
					<text class="font text-white">发送</text>
				</view>
			</view>
		</uni-popup>
		
		<!-- 送礼物弹出层 -->
		<uni-popup type="bottom" ref="giftPopup">
			<view class="bg-white" style="width: 750rpx; height: 550rpx;">
				
				<view style="height: 100rpx;" class="flex justify-between align-center">
					<text class="text-main font-md ml-3">礼物</text>
					<view class="flex align-center justify-center" style="width: 100rpx; height:100rpx" @click="closeGift">
						<text class="iconfont font-sm" style="text-align:center; display: block; font-size: 25px;">&#xe607</text>
					</view>
				</view>
				
				<swiper :indicator-dots="true" :duration="500" style="height: 350rpx;" class="border-bottom border-top">
					<swiper-item>
						<view class="flex flex-wrap">
							<view style="width: 187rpx; height: 175rpx;" class="flex flex-column justify-center align-center" v-for="(item, index) in gifts" :key="index" :class="giftActiveId === item.id ? 'border border-main' : '' " @click="giftActiveId = item.id">
								<image :src="item.image" style="width: 100rpx; height:100rpx;background-color: white"></image>
								<view class="flex mt-1">
									<text class="text-warning font mr-1">{{item.name}}</text>
									<text class="text-secondary font">{{item.coin}}</text>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"></view>
					</swiper-item>
				</swiper>
				
				<view style="height: 100rpx;" class="flex align-center justify-end">
					<view class="bg-main flex align-center justify-center py-2 px-2 mr-3 rounded bg-warning" @click="openCoin">
						<text class="font text-white">充值</text>
					</view>
					<view class="bg-main flex align-center justify-center py-2 px-2 mr-3 rounded bg-main">
						<text class="font text-white" @click="sendGift">发送</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import fGift from '@/components/live/f-gift.vue';
	import uniPopup from "@/components/uni-ui/uni-popup/uni-popup.vue";
	import fDanmu from "@/components/live/f-danmu.vue";
	import demoGifts from "@/demo/gifts.js";
	import $H from '@/common/request.js';
	import $C from '@/common/config.js';
	
	export default {
		components:{
			fGift,
			uniPopup,
			fDanmu
		},
		data() {
			return {
				id: 7,
				statusBarHeight:0,
				screenHeight:0,
				content:"",
				gifts:[],
				giftActiveId:0,
				detail:{
					"created_time": "",
					"id": 1,
					"title": "",
					"cover": "",
					"user_id": 0,
					"look_count": 0,
					"coin": 0,
					"key": "",
					"status": 0,
					"userId": 0,
					"user": {
						"id": 0,
						"username": "",
						"avatar": ""
					}
				},
				sign: ""
			}
		},
		onLoad(e) {
			let res = uni.getSystemInfoSync()
			this.statusBarHeight = res.statusBarHeight
			this.screenHeight = res.windowHeight
			//演示
			this.gifts = demoGifts
			console.log(this.gifts)
			console.log(e)
			
			this.$H.get('/live/read/'+this.id).then(res=>{
				this.detail = res.data;
				this.sign = res.sign;
			})
		},
		mounted(){
			// 送礼物演示
			// setInterval(()=>{
			// 	this.$refs.gift.send({
			// 		username:"发送人",
			// 		avatar:"",
			// 		gift_name:"蛋糕",
			// 		gift_image:"/static/gift/3.png",
			// 		num:1
			// 	})
			// }, 3000)	
			
			// 发送弹幕演示
			// let id=1
			// setInterval(()=>{
			// 	this.$refs.danmu.send({
			// 		id:id,
			// 		name:"昵称"+id,
			// 		content:"DogeLive is Great!"+id
			// 	})
			// 	id++
			// },3000)
		},
		computed: {
			src() {
				if(this.detail.key == '' || this.sign == ''){
					return ''
				}
				console.log(this.detail.key)
				console.log(this.sign)
				
				// cjF8E96322PnVCkKezvu?sign=1678445187-98c1ec3d2e0bd88e4eee8140cf590ddc
				// return 'http://dogeman.studio:23481/live/'+this.detail.key+'.flv?sign='+this.sign
				return `${$C.livePlayBaseUrl}/live/${this.detail.key}.flv?sign=${this.sign}`
			}
		},
		methods: {
			back(){
					uni.navigateBack({
						delta: 1
					})
			},
			openGift(){
				this.$refs.giftPopup.open()
			},
			closeGift(){
				this.$refs.giftPopup.close()
			},
			sendGift(){
				if(this.giftActiveId === 0){
					return uni.showToast({
						title: '请选择要发送的礼物',
						icon: 'none'
					})
				}
				let index = this.gifts.findIndex(item=>item.id === this.giftActiveId)
				if(index === -1){
					return
				}
				let g = this.gifts[index]
				this.$refs.gift.send({
					username:"发送人",
					avatar:"",
					gift_name: g.name,
					gift_image:g.image,
					num:1
				})
				this.closeGift()
			},
			openInput(){
				this.$refs.input.open()
			},
			submit(){
				if(this.content === ''){
					return
				}
				this.$refs.danmu.send({
					id:Math.random()*100,
					name:"昵称",
					content:this.content
				})
				this.content = ""
				this.$refs.input.close()
			},
			openCoin(){
				uni.navigateTo({
					url:"../coin/coin"
				})
			}
		}
	}
</script>

<style>
.page{
    width: 750rpx;
	height: 100%;
}

::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
.btn{
	height: 80rpx; 
	border-radius: 100rpx; 
	background-color: rgba(255,255,255,0.12);
	align-items: center;
	justify-content: center;
}

</style>
